<template>
  <div class="list-edit-field-config">
    <!-- <div v-if="showFormField" style="width: 50%">
      <form-edit-field-config
        ref="formItemFiledRef"
        @changeEditFieldConfig="changeEditFieldConfig"
      ></form-edit-field-config>
    </div> -->
    <div v-if="!drawer" class="btnWrap">
      <h3 class="title">列表字段配置</h3>
      <i class="close fal fa-times" @click="handleClose"></i>
    </div>

    <je-form
      ref="formRef"
      class="form"
      :style="`bottom:${showSaveButton ? '20px' : '0'} `"
      :colon="false"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      size="small"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right" class="changeClass">
        <je-collapse-panel key="1" header="常规配置">
          <je-form-item label="编码" name="RESOURCECOLUMN_CODE">
            <je-input v-model:value.trim="formState.RESOURCECOLUMN_CODE" disabled />
          </je-form-item>
          <je-form-item
            label="名称"
            name="RESOURCECOLUMN_NAME"
            v-bind="validateInfos.FUNCINFO_MODALNAME"
          >
            <je-input v-model:value.trim="formState.RESOURCECOLUMN_NAME" />
          </je-form-item>
          <je-form-item
            label="列宽"
            name="RESOURCECOLUMN_WIDTH"
            v-bind="validateInfos.RESOURCECOLUMN_WIDTH"
          >
            <je-input-number
              v-model:value="formState.RESOURCECOLUMN_WIDTH"
              style="width: 100%"
              :min="0"
              addon-after="px"
              @focus="handFocus($event)"
            />
          </je-form-item>
          <je-form-item label="类型" name="RESOURCECOLUMN_XTYPE">
            <je-select
              v-model:value="formState.RESOURCECOLUMN_XTYPE"
              allow-clear
              disabled
              config-info="JE_FUNC_COLUMN_XTYPE,formState.RESOURCECOLUMN_XTYPE,code,S"
            >
            </je-select>
          </je-form-item>
          <je-form-item label="标题对齐方式" name="RESOURCECOLUMN_ALIGN_TITLE">
            <je-radio-group
              v-model:value="formState.RESOURCECOLUMN_ALIGN_TITLE"
              class="radioGroup"
              config-info="JE_FUNC_COLUMN_ALIGN,formState.RESOURCECOLUMN_ALIGN_TITLE,code,S"
              option-type="button"
            />
          </je-form-item>
          <je-form-item label="数据对齐方式" name="RESOURCECOLUMN_ALIGN">
            <je-radio-group
              v-model:value="formState.RESOURCECOLUMN_ALIGN"
              class="radioGroup"
              config-info="JE_FUNC_COLUMN_ALIGN,formState.RESOURCECOLUMN_ALIGN,code,S"
              option-type="button"
            />
          </je-form-item>
          <je-form-item label="字典高亮" name="RESOURCECOLUMN_COLOR1">
            <je-checkbox-group
              v-model:value="formState.RESOURCECOLUMN_COLOR1"
              config-info="JE_FUNC_DDCOLOR,ormState.RESOURCECOLUMN_COLOR1,code,S"
            />
          </je-form-item>

          <je-form-item label="启用超级链接" name="RESOURCECOLUMN_ENABLHYPERLINKS">
            <je-radio-group
              v-model:value="formState.RESOURCECOLUMN_ENABLHYPERLINKS"
              style="display: inline"
            >
              <je-radio value="1">进入表单</je-radio>
              <je-radio value="0">弹出表单</je-radio>
              <je-radio value="">无</je-radio>
            </je-radio-group>

            <span class="prompt" style="margin: 0">文字变为超链接。</span>
          </je-form-item>

          <je-form-item label="自动填充" name="RESOURCECOLUMN_AUTO_FILL">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_AUTO_FILL"
              mode="checkbox"
              label="启用"
            />
            <span class="prompt">启用后字段自动补全表格空白。</span>
          </je-form-item>

          <je-form-item label="事件编辑" name="RESOURCECOLUMN_JSLISTENER">
            <je-tooltip placement="top" title="编辑">
              <span class="iconWrap" style="margin-left: 6px" @click="handleJs">
                <i
                  class="fas fa-bolt"
                  :style="`color:${
                    changeJsListener(formState.RESOURCECOLUMN_JSLISTENER) ? '#F4CE4A' : '#8d98ab'
                  }`"
                ></i
              ></span>
            </je-tooltip>
            <span class="prompt">注册且监控字段的各种事件。</span>
          </je-form-item>

          <je-button v-if="!isShowFieldConfig" style="width: 100%" @click="clickFormFiled"
            >激活表单字段配置面板</je-button
          >
        </je-collapse-panel>

        <je-collapse-panel key="2">
          <template #header>
            <div>
              统计配置
              <!-- <i class="fas fa-flower" style="color: rgb(235, 235, 235)"></i> -->
            </div>
          </template>
          <je-form-item label="统计类型" name="RESOURCECOLUMN_STATISTICSTYPE">
            <je-checkbox-group
              v-model:value="formState.RESOURCECOLUMN_STATISTICSTYPE"
              class="checkboxGroup"
            >
              <je-checkbox class="checkbox" value="msg" style="margin-bottom: 6px"
                >描述</je-checkbox
              >
              <je-checkbox class="checkbox" value="count" style="margin-bottom: 6px"
                >计数</je-checkbox
              >
              <je-checkbox class="checkbox" value="sum" style="margin-bottom: 6px"
                >求和</je-checkbox
              >
              <je-checkbox class="checkbox" value="average">平均值</je-checkbox>
              <je-checkbox class="checkbox" value="max">最大值</je-checkbox>
              <je-checkbox class="checkbox" value="min">最小值</je-checkbox>
            </je-checkbox-group>
          </je-form-item>
          <StatisticsConfig
            v-model:value="formState.RESOURCECOLUMN_STATISTICSCONFIG"
            :enable-items="formState.RESOURCECOLUMN_STATISTICSTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel key="3" header="样式配置">
          <je-form-item label="标题颜色" name="RESOURCECOLUMN_TITLECOLOR">
            <je-color v-model:value="formState.RESOURCECOLUMN_TITLECOLOR" />
          </je-form-item>
          <je-form-item label="启用样式" name="RESOURCECOLUMN_CHECKBOX_STYLE">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_CHECKBOX_STYLE"
              mode="checkbox"
              label=""
            />
            <span class="prompt">仅字典项数据为是否时起效,勾选后默认为复选框样式。</span>
          </je-form-item>
          <je-form-item label="选中样式" name="RESOURCECOLUMN_CHECKEDCLS">
            <div class="inputWrap">
              <je-icon v-model:value="formState.RESOURCECOLUMN_CHECKEDCLS"></je-icon>
            </div>
          </je-form-item>
          <je-form-item label="不选中样式" name="RESOURCECOLUMN_UNCHECKEDCLS">
            <div class="inputWrap">
              <je-icon v-model:value="formState.RESOURCECOLUMN_UNCHECKEDCLS"></je-icon>
            </div>
          </je-form-item>

          <je-form-item label="隐藏" name="RESOURCECOLUMN_HIDDEN">
            <je-switch v-model:value="formState.RESOURCECOLUMN_HIDDEN" mode="checkbox" label="" />
            <span class="prompt">列表中将不会展示该字段。</span>
          </je-form-item>

          <je-form-item label="提示" name="RESOURCECOLUMN_COLUMNTIP">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_COLUMNTIP"
              mode="checkbox"
              label=""
            />
            <span class="prompt">当鼠标悬停在单元格上，超出部分给出提示。</span>
          </je-form-item>

          <je-form-item label="锁定列" name="RESOURCECOLUMN_LOCKED">
            <je-select v-model:value="formState.RESOURCECOLUMN_LOCKED" allow-clear>
              <je-select-option
                v-for="(item, index) in [
                  { code: 'before', text: '锁定列前' },
                  { code: 'after', text: '锁定列后' },
                ]"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <!-- <je-form-item label="合并单元格" name="RESOURCECOLUMN_MERGE">
            <je-switch v-model:value="formState.RESOURCECOLUMN_MERGE" mode="checkbox" label="" />
            <span class="prompt">上下向相邻的多个数据项将被合并成。</span>
          </je-form-item> -->

          <je-form-item label="多行显示" name="RESOURCECOLUMN_MULTIROWS">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_MULTIROWS"
              mode="checkbox"
              label=""
            />
            <span class="prompt">当数据超出单元格的时候将会自动换行。 </span>
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="4" header="查询配置">
          <je-form-item label="查询类型" name="RESOURCECOLUMN_COLUMNQUERYTYPE">
            <je-radio-group
              v-model:value="formState.RESOURCECOLUMN_COLUMNQUERYTYPE"
              config-info="JE_FUNC_QUERYTYPE,formState.RESOURCECOLUMN_COLUMNQUERYTYPE,code,S"
              :querys="[
                {
                  code: 'DICTIONARYITEM_ITEMCODE',
                  type: 'in',
                  value: ['=', 'like', 'no'],
                },
              ]"
            />
          </je-form-item>

          <je-form-item label="快速查询" name="RESOURCECOLUMN_QUERYTYPE">
            <!-- switch组件处理，设置不同的值 -->
            <je-switch v-model:value="formState.RESOURCECOLUMN_QUERYTYPE" mode="checkbox" />
            <span class="prompt">对应的字典数据会被加入到功能左侧查询树。</span>
          </je-form-item>

          <je-form-item label="快查带值" name="RESOURCECOLUMN_QUICKQUERYVALUE">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_QUICKQUERYVALUE"
              mode="checkbox"
              label=""
            />
            <span class="prompt">进入表单时自动填充已选中快速查询项数值。</span>
          </je-form-item>

          <!-- <je-form-item name="RESOURCECOLUMN_OPENMOREBUT">
            <template #label>
              <div>
                开启更多按钮 <i class="fas fa-flower" style="color: rgb(235, 235, 235)"></i>
              </div>
            </template>
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_OPENMOREBUT"
              mode="checkbox"
              label=""
            />
            <span class="prompt">开启后鼠标滑过节点，展示出更多按钮。</span>
          </je-form-item>

          <je-form-item name="RESOURCECOLUMN_MOREBUTCONFIG">
            <template #label>
              <div>
                更多按钮配置 <i class="fas fa-flower" style="color: rgb(235, 235, 235)"></i>
              </div>
            </template>
            <div
              class="iconWrap"
              @click="
                showModal({
                  type: 'MoreButtonConfig',
                  data: formState.RESOURCECOLUMN_MOREBUTCONFIG,
                  funcId,
                })
              "
            >
              <i
                class="fas fa-cog"
                :style="`color:${formState.RESOURCECOLUMN_MOREBUTCONFIG ? '#F4CE4A' : '#8d98ab'}`"
              ></i>
              <span class="prompt">点击按钮进行，更多按钮配置。</span>
            </div>
          </je-form-item> -->
        </je-collapse-panel>

        <je-collapse-panel key="5" header="关联查询">
          <je-form-item label="关联查询列" name="RESOURCECOLUMN_QUICKQUERY">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_QUICKQUERY"
              mode="checkbox"
              label=""
            />
            <span class="prompt">功能被当成关联查询选择器时候展示的字段。 </span>
          </je-form-item>
          <je-form-item label="查询快速查询" name="RESOURCECOLUMN_QUICKQUERYTYPE">
            <je-switch v-model:value="formState.RESOURCECOLUMN_QUICKQUERYTYPE" mode="checkbox" />
            <span class="prompt">关联查询选择时是否启用快速查询。 </span>
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="6" header="其他配置">
          <je-form-item label="编辑" name="RESOURCECOLUMN_ALLOWEDIT">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_ALLOWEDIT"
              mode="checkbox"
              label=""
            />
            <span class="prompt">可在表格中编辑数据，注意启用保存按钮。</span>
          </je-form-item>
          <je-form-item label="批量更新" name="RESOURCECOLUMN_ENABLEUPDATE">
            <je-switch
              v-model:value="formState.RESOURCECOLUMN_ENABLEUPDATE"
              mode="checkbox"
              label=""
            />
            <span class="prompt">使用表头上的按钮对多条数据进行更新操作。</span>
          </je-form-item>
          <je-form-item label="排序" name="RESOURCECOLUMN_ORDER">
            <je-switch v-model:value="formState.RESOURCECOLUMN_ORDER" mode="checkbox" label="" />
            <span class="prompt">表头上会出现排序按钮。</span>
          </je-form-item>

          <je-form-item label="所属多表头" name="RESOURCECOLUMN_MORECOLUMNNAME">
            <je-select
              v-model:value="formState.RESOURCECOLUMN_MORECOLUMNNAME"
              allow-clear
              :options="funcStore.groupColumns"
            >
            </je-select>
          </je-form-item>

          <!-- <je-form-item label="其他语种">
            <je-input v-model:value="formState.RESOURCECOLUMN_NAME_EN" />
          </je-form-item>

          <je-form-item label="其他语种列宽">
            <je-input-number
              v-model:value="formState.RESOURCECOLUMN_WIDTH_EN"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
             style="width:100%"
            />
          </je-form-item> -->

          <!-- 待定 -->
          <je-form-item label="备注" name="RESOURCECOLUMN_DESCRIPTION">
            <je-textarea
              v-model:value="formState.RESOURCECOLUMN_DESCRIPTION"
              allow-clear
              :rows="4"
            />
          </je-form-item>
        </je-collapse-panel>
      </je-collapse>
    </je-form>

    <div v-if="modalOption.modalFlag">
      <component
        :is="modalOption.activeModal"
        :visble="modalOption.modalFlag"
        :record-data="modalOption.recordData"
        :func-id="modalOption.funcId"
        @changeModal="changeModal"
      ></component>
    </div>
  </div>
</template>

<script>
  import { ref, reactive, toRefs, defineComponent, onMounted, defineAsyncComponent } from 'vue';
  import { Collapse, Tooltip } from 'ant-design-vue';
  import {
    Modal,
    Checkbox,
    Radio,
    Color,
    Icon,
    Form,
    Switch,
    Input,
    InputNumber,
    Button,
    Select,
  } from '@jecloud/ui';
  const useForm = Form.useForm;
  import { LIST_FIELD_CONFIG_COMPONENTS } from '@/helper/list-field-config-components';
  import { listenerEditorModal, FormFieldEditorModal } from '@/helper/index.js';
  import {
    ListFieldConfigUpdate,
    GetPluginItemConfig as GetFormFieldConfigData,
  } from '@/api/index';

  import VueEvent from '@/helper/event';
  import StatisticsConfig from './statistics-config.vue';
  import { useListField } from '../hooks/use-list-field';
  export default defineComponent({
    name: 'ListEditFieldConfig',
    components: {
      StatisticsConfig,
      JeButton: Button,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeTextarea: Input.TextArea,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
      JeRadioButton: Radio.Button,
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeTooltip: Tooltip,
      JeColor: Color,
      JeSwitch: Switch,
      JeIcon: Icon,
      ...LIST_FIELD_CONFIG_COMPONENTS,
      FormEditFieldConfig: defineAsyncComponent({
        delay: 1000 /* 在显示加载组件之前提早毫秒 */,
        loader: () => import('../../form-field-config/components/edit-field-config.vue'),
      }),
    },
    props: {
      funcBean: Object,
      recordData: {
        type: Object,
        default() {
          return {};
        },
      },
      drawer: Boolean,
      isShowFieldConfig: Boolean,
    },
    emits: ['changeEditFieldConfig', 'changeEditFieldWidth', 'update:recordData'],
    setup(props, context) {
      const { emit, expose } = context;
      const { funcStore, formState, showFieldConfig } = useListField({ props, context });
      const formFiledItem = ref({});
      const state = reactive({
        funcId: props.funcBean.JE_CORE_FUNCINFO_ID,
        FUNCINFO_FUNCCODE: props.funcBean.FUNCINFO_FUNCCODE,
        formItemFiledRef: ref(),
        showFormField: ref(false),
        showSaveButton: ref(false),
        formRef: ref(),
        labelCol: {
          span: 6,
        },
        wrapperCol: {
          span: 18,
        },
        modalObj: {},
        activeKey: [],
        rules: {
          RESOURCECOLUMN_NAME: [{ required: true, message: '请输入名称' }],
          RESOURCECOLUMN_WIDTH: [{ required: true, message: '请输入列宽' }],
        },
        isShowFieldConfig: props.isShowFieldConfig,
      });

      const { validateInfos, validate } = useForm(formState, state.rules, {
        onValidate: (...args) => console.log(...args),
      });

      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
      });

      const methods = {
        handFocus(e) {
          e.currentTarget.select();
        },
        // 点击事件编辑
        handleJs() {
          const { JE_CORE_RESOURCECOLUMN_ID } = formState.value;

          // 获取功能的相关信息
          const { FUNCINFO_FUNCCODE, FUNCINFO_FUNCNAME, id } = props.funcBean;
          listenerEditorModal({
            funcId: id,
            funcCode: FUNCINFO_FUNCCODE,
            funcName: FUNCINFO_FUNCNAME,
            onId: JE_CORE_RESOURCECOLUMN_ID,
            eventType: 'column',
            title: '列事件',
            callback: (obj) => {
              formState.value.RESOURCECOLUMN_JSLISTENER = obj.data;
            },
          });
        },
        showModal(obj) {
          modalOption.modalFlag = true;
          modalOption.activeModal = obj.type;
          modalOption.recordData = obj.data;
          modalOption.funcId = obj.funcId;
        },

        changeJsListener(data) {
          const parseData = data ? JSON.parse(data) : [];
          let eventType = false;
          parseData.forEach((item) => {
            if (item.fire == '1') {
              eventType = true;
            }
          });
          return eventType;
        },
        changeModal(obj) {
          modalOption.modalFlag = obj.visible;

          if (obj.key) {
            formState.value[obj.key] = obj.data;
          }
        },

        handleClose() {
          emit('changeEditFieldConfig', { visible: false, isRefresh: false });
        },
        handleOk() {
          return validate()
            .then(methods.handleSave)
            .catch((error) => {
              console.error('error', error);
            });
        },
        // 点击激活表单配置
        clickFormFiled() {
          showFieldConfig({ props: { isShowFieldConfig: true } });
          // methods.getData();
        },
        // 获取表单配置字段
        getData() {
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCEFIELD_FUNCINFO_ID',
                  value: formState.value.RESOURCECOLUMN_FUNCINFO_ID,
                  type: '=',
                  cn: 'and',
                },
                {
                  code: 'RESOURCEFIELD_CODE',
                  value: formState.value.RESOURCECOLUMN_CODE,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
            funcId: formState.value.RESOURCECOLUMN_FUNCINFO_ID,
            limit: -1,
          };

          GetFormFieldConfigData(params)
            .then((res) => {
              if (!res.rows.length) {
                Modal.alert('本字段无对应的表单字段！', 'warning');
                // 当没有字段返回的时候那么也是不显示的
                state.showFormField = false;
                return false;
              }
              // 这边要将返回回来的放到对象里面
              formFiledItem.value = res.rows;
              if (res.rows.length) {
                FormFieldEditorModal({
                  recordData: formFiledItem.value[0],
                  tableCode: state.FUNCINFO_FUNCCODE,
                  from: 'listActive',
                  title: '表单字段配置',

                  callback: (obj) => {},
                });
              }
            })
            .catch((err) => {
              console.log('error', err);
            });
        },
        handleSave() {
          Object.keys(formState.value).forEach((item) => {
            if (formState.value[item] === undefined) {
              formState.value[item] = '';
            }
            if (item != 'SY_ORDERINDEX') {
              formState.value[item] = formState.value[item] || '';
            }
          });
          // const strData = JSON.parse(JSON.stringify(formState.value));
          // 删除属性
          // strData._updatefields_ = Object.keys(strData).join(',');
          return ListFieldConfigUpdate({
            funcId: formState.value.JE_CORE_RESOURCECOLUMN_ID,
            strData: JSON.stringify([formState.value]),
          })
            .then((res) => {
              Modal.message(res.message, 'success');
              emit('changeEditFieldConfig', { visible: false, isRefresh: true });
              VueEvent.emit('refreshListFieldConfig');
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
      };

      //  暴露doSave方法，用于drawer保存关闭使用，返回Promise，成功关闭
      expose({ doSave: methods.handleOk });
      onMounted(() => {
        const arr = [];
        for (let i = 1; i < 30; i++) {
          arr.push(String(i));
        }
        state.activeKey = arr;
      });

      return {
        funcStore,
        ...toRefs(state),
        ...methods,
        modalOption,
        formState,
        formFiledItem,
        validateInfos,
      };
    },
  });
</script>
<style lang="less">
  .list-edit-field-config {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
    .ant-form-item-label {
      label {
        //这是关键
        white-space: normal;
        height: auto;
        margin: 9px 0 0 0;
        vertical-align: top;
        line-height: 1;
      }
    }
    .radioGroup.ant-radio-group {
      width: 100%;
      display: flex;
      .ant-radio-button-wrapper {
        width: 33.33%;
        text-align: center;
      }
    }
    .checkboxGroup.ant-checkbox-group {
      padding-left: 0px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .checkbox {
        display: flex;
        align-items: center;
        width: 31% !important;
        height: 32px;
        margin: 0 3.5% 0 0;
        padding: 0 15px;
        border: 1px solid #e6e6e6;
        .ant-checkbox {
          margin-top: -5px;
        }
      }
      .checkbox:nth-child(3n) {
        margin: 0;
      }
      .checkbox.ant-checkbox-wrapper-checked {
        background: #e8f4ff;
        border: 1px solid #e6e6e6;
      }
    }
    .inputWrap {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .input {
        display: flex;
        width: 31% !important;
        height: 32px;
        margin: 0 3.5% 0 0;
        // padding: 0 10px;
        border: 1px solid #e6e6e6;
      }
      .input:focus {
        border-color: #5c8dff;
      }
      .input:nth-child(3n) {
        margin: 0;
      }
    }
    .ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
      padding: 5px 16px !important;
      background: #f7f9fc !important;
    }
  }
</style>
<style lang="less" scoped>
  .list-edit-field-config {
    height: 100%;
    display: flex;
    flex-direction: column;
    .btnWrap {
      flex: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      border: 1px solid #e6e6e6;
      border-bottom: 0;
      background-color: #f1f1f1;
      .title {
        margin: 0;
        font-size: 16px;
      }
      .submit {
        margin: 0 0 0 auto;
      }
      .close {
        margin: 0 0 0 20px;
        // padding: 5px;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .form {
      flex: auto;
      overflow: auto;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
      }
      .top {
        display: flex;
        margin: 0 0 20px 0;
        .span {
          margin: 0 10px 0 0;
          cursor: pointer;
          .fal:before {
            margin: 0 5px 0 0;
          }
        }
      }
      .iconWrap {
        cursor: pointer;
      }
      .inputWrap {
        position: relative;
        .setIcon {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -50%);
          cursor: pointer;
        }
      }
      .prompt {
        margin: 0 0 0 10px;
        color: #3265f5;
        vertical-align: top;
        font-style: italic;
      }
    }
  }
</style>
